<template>
    <div id="app">
        <el-breadcrumb separator-class="el-icon-arrow-right" separator="/">
            <el-breadcrumb-item :to="{ path: 'list' }">社区管理</el-breadcrumb-item>
            <el-breadcrumb-item :to="{ path: 'list' }">帖子</el-breadcrumb-item>
            <el-breadcrumb-item>新增帖子</el-breadcrumb-item>
        </el-breadcrumb>
        <el-col :span="6" :offset="9" style="padding-top: 80px">
            <el-form ref="form" :model="form" label-width="120px" class="create">
                <el-form-item label="贴子">
                    <template>
                        <el-select v-model="form.communityPostId" filterable placeholder="请选择帖子">
                            <el-option
                                    v-for="item in form.communityPostOptions"
                                    :key="item.id"
                                    :label="item.content"
                                    :value="item.id">
                            </el-option>
                        </el-select>
                    </template>
                </el-form-item>
                <el-form-item label="发帖人学号:">
                    <el-select v-model="form.reader" @change="changeReader"  filterable placeholder="请输入学号">
                        <el-option
                                v-for="item in form.readerOptions"
                                :key="item.id"
                                :label="item.number"
                                :value="item">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="发帖人:">
                    {{form.readerName}}
                </el-form-item>
                <el-form-item label="内容">
                    <el-input v-model="form.content" placeholder="请输入内容" ></el-input>
                </el-form-item>

                <el-form-item>
                    <el-button type="primary" @click="onSubmit">保存</el-button>
                    <el-button @click="onCancel">取消</el-button>
                </el-form-item>
            </el-form>
        </el-col>
    </div>
</template>

<script>
    import { create } from '../../../../module/admin/community/communityPostReturn';
    import { communityPosts } from '../../../../module/admin/community/communityPost';
    import { readerInfo} from '../../../../module/admin/reader/readerInfo';
    import { setParams } from  '../../../../utils/page';
    import { Message } from 'element-ui';
    export default {
        data () {
            return {
                form: {
                    content: '',
                    communityPostId: '',
                    communityPostOptions: [],
                    readerId: '',
                    readerOptions: [],
                    readerName: ''
                }
            }
        },
        mounted () {
            let _this = this;
            let params = {
                filter: {
                    pageNum: 1,
                    pageSize: 10000,
                },
                search: {
                    key: '',
                    value: ''
                }
            };
            const param = setParams(params);
            communityPosts(param).then(communityPost => {
                _this.form.communityPostOptions = communityPost.list;
            });
            readerInfo(param).then(readerInfo => {
                _this.form.readerOptions = readerInfo.list;
            });
        },
        methods: {
            changeReader(val) {
                this.form.readerName = val.username;
                this.form.readerId = val.id;
            },
            changeBookInfo(val) {
                this.form.communityPostId = val.id;

            },
            onSubmit() {
                let _this = this;
                create(this.form).then(function (data) {
                    _this.$message({
                        type: 'success',
                        center: true,
                        message: '添加回帖成功!'
                    });
                }).catch(function (error) {
                    _this.$message({
                        type: 'error',
                        center: true,
                        message: '添加回帖失败!'
                    });
                });
                this.$router.push({
                    name: "admin-community-post-return-list"
                })
            },
            onCancel() {
                this.$router.push({
                    name: "admin-community-post-return-list"
                })
            },
        },

    }
</script>

<style>
    .create .el-step {
        cursor: pointer;
    }

    .create .el-input, .create .el-date-editor.el-input {
        width: 200px;
    }

</style>
